<script setup>
const emit = defineEmits(['confirm'])

// 定义 props
const { title } = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  active: {
    type: Boolean,
    default: false
  }
})

const openPopup = () => {
  emit('update:show', true)
  emit('confirm', title)
}
</script>

<template>
  <div
    class="flex items-center text-14px font-400 leading-20px text-#71747A pr-12px flex-nowrap whitespace-nowrap"
    :style="{ color: active ? '#229F60' : '#71747A' }"
    @click="openPopup"
  >
    {{ title }}
    <img
      v-if="!active"
      class="flex items-center w-14px h-14px ml[-1px]"
      src="@/assets/img/icon_paixu.svg"
      alt=""
    />
    <img
      v-if="active"
      class="flex items-center w-14px h-14px ml[-1px]"
      src="@/assets/img/icon_paixu-active.svg"
      alt=""
    />
  </div>
</template>

<style scoped lang="less"></style>
